<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
  <script>
    const app = Vue.createApp({
      data() {
        return {
          message: "hello world",
          count: 2,
          price: 5,
          newTotal: 10,
        }
      },
      watch: {
        // price 发生变化时，函数会执行
        price(current, prev) {
          this.newTotal = current * this.count;
        }
      },
      computed: {
        // 当计算属性依赖的内容发生变更时，才会重新执行计算
        total() {
          return Date.now() + this.count;
          // return this.count * this.price
        }
      },
      methods: {
        formatString(string) {
          return string.toUpperCase();
        },
        // 只要页面重新渲染，才会重新计算
        getTotal() {
          return Date.now();
          // return this.count * this.price;
        },
      },
      template: `
        <div>
          {{formatString(message)}}
          {{getTotal()}}
          {{total}}
          {{newTotal}}
        </div>
      `
    })
    const vm = app.mount('#root')
  </script>
</body>

</html>